<template>
  <div class="visualization-container">
    <div class="chart-layout">
      <!-- Top charts -->
      <div class="top-charts">
        <div ref="topLeftChart" class="chart-container"></div>
        <div ref="topRightChart" class="chart-container"></div>
      </div>
      
      <!-- Center area (empty as requested) -->
      <div class="center-area"></div>
      
      <!-- Bottom charts -->
      <div class="bottom-charts">
        <div ref="bottomLeftChart" class="chart-container"></div>
        <div ref="bottomRightChart" class="chart-container"></div>
      </div>
      
      <!-- Side charts -->
      <div ref="leftChart" class="side-chart left-chart"></div>
      <div ref="rightChart" class="side-chart right-chart"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

// Chart references
const topLeftChart = ref(null);
const topRightChart = ref(null);
const bottomLeftChart = ref(null);
const bottomRightChart = ref(null);
const leftChart = ref(null);
const rightChart = ref(null);

// Chart instances
let chartInstances = [];

// Sample data (Replace with your actual data)
const generateRandomData = () => {
  return Array.from({ length: 7 }, () => Math.floor(Math.random() * 100));
};

const weekdays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

// Initialize charts
onMounted(() => {
  // Top left chart - Bar chart
  const topLeftChartInstance = echarts.init(topLeftChart.value);
  topLeftChartInstance.setOption({
    title: {
      text: '每周签到人数',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: weekdays
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: generateRandomData(),
      type: 'bar'
    }]
  });
  
  // Top right chart - Line chart
  const topRightChartInstance = echarts.init(topRightChart.value);
  topRightChartInstance.setOption({
    title: {
      text: '签到时长统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: weekdays
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: generateRandomData(),
      type: 'line',
      smooth: true
    }]
  });
  
  // Bottom left chart - Pie chart
  const bottomLeftChartInstance = echarts.init(bottomLeftChart.value);
  bottomLeftChartInstance.setOption({
    title: {
      text: '项目类型分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 35, name: '前端开发' },
        { value: 20, name: '后端开发' },
        { value: 15, name: '机器学习' },
        { value: 25, name: '移动应用' },
        { value: 5, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });
  
  // Bottom right chart - Radar chart
  const bottomRightChartInstance = echarts.init(bottomRightChart.value);
  bottomRightChartInstance.setOption({
    title: {
      text: '能力分布',
      left: 'center'
    },
    tooltip: {},
    radar: {
      indicator: [
        { name: '编码能力', max: 100 },
        { name: '学习能力', max: 100 },
        { name: '团队协作', max: 100 },
        { name: '问题解决', max: 100 },
        { name: '创新能力', max: 100 }
      ]
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: [80, 90, 70, 85, 75],
          name: '平均能力'
        }
      ]
    }]
  });
  
  // Left side chart - Vertical bar chart
  const leftChartInstance = echarts.init(leftChart.value);
  leftChartInstance.setOption({
    title: {
      text: '活动参与率',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['项目A', '项目B', '项目C', '项目D', '项目E']
    },
    series: [{
      name: '参与率',
      type: 'bar',
      data: [95, 82, 78, 87, 68]
    }]
  });
  
  // Right side chart - Gauge chart
  const rightChartInstance = echarts.init(rightChart.value);
  rightChartInstance.setOption({
    title: {
      text: '实验室效率',
      left: 'center'
    },
    series: [{
      type: 'gauge',
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}%'
      },
      data: [{ value: 78 }]
    }]
  });
  
  // Save chart instances for resize handling and cleanup
  chartInstances = [
    topLeftChartInstance,
    topRightChartInstance,
    bottomLeftChartInstance,
    bottomRightChartInstance,
    leftChartInstance,
    rightChartInstance
  ];
  
  // Handle window resize
  window.addEventListener('resize', handleResize);
});

// Handle chart resize
const handleResize = () => {
  chartInstances.forEach(chart => {
    chart.resize();
  });
};

// Clean up event listeners and chart instances
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  chartInstances.forEach(chart => {
    chart.dispose();
  });
});
</script>

<style scoped>
.visualization-container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.chart-layout {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-columns: 1fr 5fr 1fr;
  gap: 20px;
}

.top-charts {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  gap: 20px;
}

.center-area {
  grid-row: 2;
  grid-column: 2;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.bottom-charts {
  grid-row: 3;
  grid-column: 2;
  display: flex;
  gap: 20px;
}

.side-chart {
  height: 100%;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.left-chart {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.right-chart {
  grid-column: 3;
  grid-row: 1 / span 3;
}

.chart-container {
  flex: 1;
  height: 100%;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style> 